﻿@model InstallModel
@using SmartStore.Core.Infrastructure;
@using SmartStore.Web.Models.Install;
@using SmartStore.Web.Infrastructure.Installation;
@{
    // localization service for installation service
    // we do not use standard smnet localization because database is not installed yet
    // locale resources fpr installation process are stored into \App_Data\Localization\Installation directory
    var ILS = EngineContext.Current.Resolve<IInstallationLocalizationService>();
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>@ILS.GetResource("Title")</title>
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <script>
        window.Res = {
            "Common.Notification": "@ILS.GetResource("Common.Notification").EncodeJsString()",
        }
    </script>

    @* styles *@ 
	<link href='~/Content/fontastic/fontastic.css' type='text/css' rel='stylesheet' />
    <link href='~/Content/vendors/fa5/css/all.css' type='text/css' rel='stylesheet' />
	<link href='~/Administration/Content/theme.scss' type='text/css' rel='stylesheet' />

    @* scripts (head) *@
    <script src='~/Content/vendors/modernizr/modernizr.js' type='text/javascript'></script>
    <script src='~/Content/vendors/jquery/jquery-3.4.1.min.js' type='text/javascript'></script>
	<script src='~/Content/bs4/js/bootstrap.bundle.min.js' type='text/javascript'></script>

	<style>
		.content {
			max-width: 990px !important;
			margin-left: auto !important;
			margin-right: auto !important;
		}
	</style>
</head>
<body>
	<div id="page">
		<div class="page-main">

			<header id="header">
				<nav id="navbar" class="navbar navbar-dark navbar-expand-sm content p-0">
					<a class="navbar-brand mx-0 mr-3" href="https://www.smartstore.com">
						<img class="navbar-img" src="~/Administration/Content/images/smartstore.svg" alt="SmartStore.NET" />
					</a>
					<div class="navbar-text h5 p-0 m-0 pl-1" style="height: 20px; vertical-align: bottom">
						@ILS.GetResource("Title")
					</div>

					<div class="collapse navbar-collapse ml-auto">
						<ul class="navbar-nav ml-auto">
							<li class="nav-item dropdown">
								<a class="nav-link dropdown-toggle navbar-tool" href="javascript:void(0)" title="Deutsch" data-toggle="dropdown" style="max-width: none">
									<i class="icm icm-earth navbar-icon pr-1"></i>
									<span style="text-transform: uppercase">@Model.AvailableLanguages.First(x => x.Selected).Text</span>
								</a>
								<div class="dropdown-menu dropdown-menu-right">
									@foreach (var lang in Model.AvailableLanguages)
									{
										<a class="dropdown-item" href="@lang.Value">
											<i class="icm icm-check@(!lang.Selected ? " invisible" : "")"></i>
											<span>@lang.Text</span>
										</a>
									}
								</div>
							</li>
							<li class="nav-item">
								<a class="nav-link navbar-tool" href="@Url.Action("RestartInstall", "Install")" title="@ILS.GetResource("RestartInstallation")" rel="nofollow">
									<i class="icm icm-refresh navbar-icon"></i>
								</a>
							</li>
						</ul>
					</div>
				</nav>
			</header>

			<div id="content" class="content" style="padding: 3rem !important">
				<div class="cph">
					@using (Ajax.BeginForm("Install", "Install", new AjaxOptions
					{
						Confirm = ILS.GetResource("ConfirmInstall"),
						HttpMethod = "POST",
						OnBegin = "Installation.onStart",
						OnComplete = "Installation.onComplete",
						OnFailure = "Installation.onFailure",
						OnSuccess = "Installation.onSuccess"
					}, new { @class = "form-horizontal", autocomplete = "on" }))
					{
						<div class="install-panel">
							<div class="install-content">
								<p class="fs-h6 text-muted">
									@ILS.GetResource("Tooltip1").
								</p>
								<p class="fs-h6 text-muted mb-5">
									@ILS.GetResource("Tooltip2").
								</p>

								<!-- General -->
								<fieldset class="mb-5">
									<div class="heading mb-3">
										<h2 class="heading-title text-muted">@ILS.GetResource("StoreInformation")</h2>
									</div>
									<div class="form-group row">
										<label class="col-md-3 col-form-label" for="AdminEmail">@ILS.GetResource("AdminEmail")</label>
										<div class="col-md-9">
											@Html.TextBoxFor(x => x.AdminEmail, new { @class = "form-control" })
											@Html.ValidationMessageFor(x => x.AdminEmail)
										</div>
									</div>
									<div class="form-group row">
										<label class="col-md-3 col-form-label" for="AdminPassword">@ILS.GetResource("AdminPassword")</label>
										<div class="col-md-9">
											@Html.PasswordFor(x => x.AdminPassword)
											@Html.ValidationMessageFor(x => x.AdminPassword)
										</div>
									</div>
									<div class="form-group row">
										<label class="col-md-3 col-form-label" for="ConfirmPassword">@ILS.GetResource("ConfirmPassword")</label>
										<div class="col-md-9">
											@Html.PasswordFor(x => x.ConfirmPassword)
											@Html.ValidationMessageFor(x => x.ConfirmPassword)
										</div>
									</div>
								</fieldset>

								<!-- Database -->
								<fieldset class="mb-5">
									<div class="heading mb-3">
										<h2 class="heading-title text-muted">@ILS.GetResource("DatabaseInformation")</h2>
									</div>
									<div class="form-group row">
										<label class="col-md-3 col-form-label" for="DataProvider">@ILS.GetResource("Database")</label>
										<div class="col-md-9">
											<select name="DataProvider" id="DataProvider" class="form-control">
												<option value="sqlce">@ILS.GetResource("SqlCompact")</option>
												<option value="sqlserver">@ILS.GetResource("SqlStandard") @ILS.GetResource("Recommended")</option>
											</select>
											@Html.ValidationMessageFor(x => x.DataProvider)
										</div>
									</div>
									<div id="sqlConnectionInfo" style="display: none">
										<div class="form-group row">
											<label class="col-md-3 col-form-label" for="DataProvider">@ILS.GetResource("Connection")</label>
											<div class="col-md-9">
												<select name="SqlConnectionInfo" id="SqlConnectionInfo" class="form-control">
													<option value="sqlconnectioninfo_values">@ILS.GetResource("ConnectionStringValues")</option>
													<option value="sqlconnectioninfo_raw">@ILS.GetResource("RawConnectionString")</option>
												</select>
												@Html.ValidationMessageFor(x => x.SqlConnectionInfo)
											</div>
										</div>

										<div id="sqlDatabaseInfo">
											<div class="form-group row">
												<label class="col-md-3 col-form-label" for="SqlServerName">@ILS.GetResource("SqlServerName")</label>
												<div class="col-md-9">
													@Html.TextBoxFor(x => x.SqlServerName, new { @class = "form-control" })
												</div>
											</div>
											<div class="form-group row">
												<label class="col-md-3 col-form-label" for="SqlDatabaseName">@ILS.GetResource("DatabaseName")</label>
												<div class="col-md-9">
													<div class="form-row">
														<div class="col">
															@Html.TextBoxFor(x => x.SqlDatabaseName, new { @class = "form-control" })
														</div>
														<div class="col-auto">
															<div class="form-check form-control-plaintext">
																@Html.CheckBoxFor(x => x.SqlServerCreateDatabase, new { id = "SqlServerCreateDatabase", @class = "form-check-input" })
																<label class="form-check-label" for="SqlServerCreateDatabase">@ILS.GetResource("CreateDatabaseIfDoesNotExist")</label>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="form-group row">
												<label class="col-md-3 col-form-label" for="DataProvider">@ILS.GetResource("Authentication")</label>
												<div class="col-md-9">
													<select name="SqlAuthenticationType" id="SqlAuthenticationType" class="form-control">
														<option value="sqlauthentication">@ILS.GetResource("SqlAuthentication")</option>
														<option value="windowsauthentication">@ILS.GetResource("WindowsAuthentication")</option>
													</select>
													@Html.ValidationMessageFor(x => x.SqlAuthenticationType)
												</div>
											</div>
											<div id="pnlSqlAuth">
												<div class="form-group row">
													<div class="col-md-9 offset-md-3">
														<div class="form-row">
															<div class="col-6">
																<div class="has-icon">
																	@Html.TextBoxFor(x => x.SqlServerUsername, new { @class = "form-control", placeholder = ILS.GetResource("SqlServerUsername") })
																	<span class="input-group-icon text-muted"><i class="icm icm-user" style="line-height: inherit"></i></span>
																</div>
															</div>
															<div class="col-6">
																<div class="has-icon">
																	@Html.PasswordFor(x => x.SqlServerPassword, new { @class = "form-control", placeholder = ILS.GetResource("SqlServerPassword") })
																	<span class="input-group-icon text-muted"><i class="icm icm-shield" style="line-height: inherit"></i></span>
																</div>

															</div>
														</div>
													</div>
												</div>
											</div>

										</div>

										<div id="sqlDatabaseConnectionString">
											<div class="form-group row">
												<label class="col-md-3 col-form-label" for="DatabaseConnectionString">@ILS.GetResource("ConnectionString")</label>
												<div class="col-md-9">
													@Html.TextBoxFor(x => x.DatabaseConnectionString, new { @class = "form-control" })
													<small class="form-text text-muted mt-2">
														@ILS.GetResource("Example"):
														Data Source=sqlServerName;Initial Catalog=dbName;Persist Security Info=True;User
														ID=userName;Password=password
														<br />
														Find more info <a href="http://www.connectionstrings.com/" rel="nofollow" target="_blank">here</a>
													</small>
												</div>
											</div>
										</div>

										<div class="form-group row">
											<div class="col-12">
												<hr />
											</div>
										</div>
										<div class="form-group row">
											<div class="col-md-9 offset-md-3">
												<div class="form-check mb-2">
													@Html.CheckBoxFor(x => x.UseCustomCollation, new { id = "UseCustomCollation", @class = "form-check-input" })
													<label class="form-check-label" for="UseCustomCollation">@ILS.GetResource("CustomCollation")</label>
												</div>
												@Html.TextBoxFor(x => x.Collation, new { disabled = "disabled", @class = "form-control" })
											</div>
										</div>
									</div>
								</fieldset>

								<!-- Options -->
								<fieldset class="mb-5">
									<div class="heading mb-3">
										<h2 class="heading-title text-muted">@ILS.GetResource("InstallOptions")</h2>
									</div>
									<div class="form-group row">
										<label class="col-md-3 col-form-label" for="PrimaryLanguage">@ILS.GetResource("PrimaryLanguage")</label>
										<div class="col-md-9">
											@Html.DropDownListFor(x => x.PrimaryLanguage, Model.AvailableAppLanguages, new { @class = "form-control" })
											@Html.ValidationMessageFor(x => x.PrimaryLanguage)
										</div>
									</div>
									<div class="form-group row">
										<label class="col-md-3 col-form-label" for="MediaStorage">@ILS.GetResource("MediaStorage.Label")</label>
										<div class="col-md-9">
											@Html.DropDownListFor(x => x.MediaStorage, Model.AvailableMediaStorages, new { @class = "form-control" })
											@Html.ValidationMessageFor(x => x.MediaStorage)
											<small class="form-text text-muted mt-2">
												@ILS.GetResource("MediaStorage.Hint")
											</small>
										</div>
									</div>
									<div class="form-group row">
										<div class="col-md-9 offset-md-3">
											<div class="form-check">
												@Html.CheckBoxFor(x => x.InstallSampleData, new { id = "InstallSampleData", @class = "form-check-input" })
												<label class="form-check-label" for="InstallSampleData">@ILS.GetResource("CreateSampleData")</label>
											</div>
										</div>
									</div>
								</fieldset>

								<div class="form-group row">
									<div class="col-md-9 offset-md-3">
										<div id="messages" class="alert alert-danger hide">
											<ul>
												<!-- AJAX -->
											</ul>
										</div>
										<button type="submit" id="install-button" class="btn btn-primary btn-lg btn-block btn-install fs-h4 font-weight-normal">
											<i class="icm icm-download2"></i>
											<span>@ILS.GetResource("Install")</span>
										</button>
									</div>
								</div>
							</div>
						</div>
					}
				</div>
			</div>
		</div>
	</div>

    @* scripts (foot) *@
    <script src='~/Content/vendors/jquery/jquery.unobtrusive-ajax.min.js' type='text/javascript'></script>
    <script src='~/Content/vendors/jquery/jquery.validate.min.js' type='text/javascript'></script>
    <script src='~/Content/vendors/jquery/jquery.validate.unobtrusive.min.js' type='text/javascript'></script>
    <script src='~/Scripts/smartstore.system.js' type='text/javascript'></script>
	<script src='~/Scripts/smartstore.viewport.js' type='text/javascript'></script>
	<script src='~/Scripts/smartstore.common.js' type='text/javascript'></script>

    <script src='~/Content/vendors/underscore/underscore.min.js' type='text/javascript'></script>
    <script src='~/Content/vendors/underscore/underscore.string.min.js' type='text/javascript'></script>
    <script src='~/Scripts/underscore.mixins.js' type='text/javascript'></script>

    <script src='~/Content/vendors/jquery/jquery.addeasing.js' type='text/javascript'></script>
    <script src='~/Scripts/smartstore.throbber.js' type='text/javascript'></script>
    <script src='~/Content/vendors/jquery/jquery.scrollTo.js' type='text/javascript'></script>
    <script src='~/Scripts/public.common.js' type='text/javascript'></script>
	<script src='~/Scripts/jquery.validate.unobtrusive.custom.js' type='text/javascript'></script>

    <script>
		function hide(el, thenShow) {
			$(el).slideUp(300, "ease-in-out", function () {
				if (thenShow) {
					show($(thenShow));
				}
			});
		}

		function show(el) {
			$(el).slideDown(300, "ease-in-out");
		}

		function toggleProvider(e) {
			var selectedProvider = $(this).val();
			if (selectedProvider == 'sqlce') {
				hide('#sqlConnectionInfo');
			}
			else if (selectedProvider == 'sqlserver') {
				show('#sqlConnectionInfo');
			}
		}

		function toggleSqlConnectionInfo(e) {
			var selectedProvider = $(this).val();
			if (selectedProvider == 'sqlconnectioninfo_values') {
				hide('#sqlDatabaseConnectionString', '#sqlDatabaseInfo');
			}
			else if (selectedProvider == 'sqlconnectioninfo_raw') {
				hide('#sqlDatabaseInfo', '#sqlDatabaseConnectionString');
			}
		}

		function toggleSqlAuthenticationType(e) {
			var selectedProvider = $(this).val();
			if (selectedProvider == 'sqlauthentication') {
				$('#pnlSqlAuth input').removeAttr("disabled");
			}
			else if (selectedProvider == 'windowsauthentication') {
				$('#pnlSqlAuth input').attr("disabled", "disabled");
			}
		}


		function toggleCollation(e) {
			if ($('#UseCustomCollation').is(':checked')) {
				$('#Collation').removeAttr("disabled");
			}
			else {
				$('#Collation').attr("disabled", "disabled");
			}
		}

		$(function () {
			$('#DataProvider').on('change', toggleProvider).trigger('change');
			$('#SqlConnectionInfo').on('change', toggleSqlConnectionInfo).trigger('change');
			$('#SqlAuthenticationType').on('change', toggleSqlAuthenticationType).trigger('change');
			$("#UseCustomCollation").on('click', toggleCollation);
		});

        var Installation = (function () {
            var progressIntervall;

            function checkProgress() {
                $.ajax({
                    url: '@Url.Action("Progress", "Install")',
                    dataType: "json",
                    async: true,
                    type: "POST",
                    cache: false,
                    success: function (data, status) {
                        console.log(data);

                        if (!data.Completed) {
                        	if (data.ProgressMessage !== undefined && _.isString(data.ProgressMessage) && data.ProgressMessage) {
                        		$("#install-progress").html(data.ProgressMessage);
                        	}
                        }
                        else {
                        	$("#install-progress").html("");
                        }
                    },
                    error: function () {
                        console.log("ERROR");
                        handleError(arguments[0].responseText);
                    }
                });
            }

            function finalizeInstallation(success) {
                $.ajax({
                    url: '@Url.Action("Finalize", "Install")',
                    data: { restart: success },
                    dataType: "json",
                    async: false,
                    type: "POST"
                });
            }

			function handleError(errors) {
                var validationSummary = $("#messages");
                var ul = validationSummary.find("ul");
                ul.html("");

                if ($.isArray(errors)) {
                    for (i = 0; i < errors.length; i++) {
                        ul.append("<li class='last-mb-0'>" + errors[i] + "</li>");
                    }
                }
                else {
					ul.append("<li class='last-mb-0'>" + errors + "</li>");
                }
                validationSummary.removeClass("hide");
                $.scrollTo(validationSummary, 400, { offset: -10 });
                $("#install-button").removeAttr("disabled");

                $("#install-progress").html("");
            }

            return {

                onStart: function (context) {

                    $.throbber.show({
                        //message: '<span id="install-message">@ILS.GetResource("Installing")</span>' + '<br /><span id="install-progress" style="font-size: 16px"></span>',
                        message: '<div id="install-message">@ILS.GetResource("Installing")</div><div id="install-progress" style="font-size: 16px; font-weight: 400; margin: 10px 0 30px 0"></div>',
                    });

                    // start the checkprogress interval
                    progressIntervall = window.setInterval(checkProgress, 1500);

                    $("#install-button").attr("disabled", "disabled");

                },

                onSuccess: function (data) {

                    finalizeInstallation(data.Success);

                    if (data.Success) {
                    	$("#install-message").html("@ILS.GetResource("Common.StartShop")");
                        $("#install-progress").html("");
                        setLocation(data.RedirectUrl);
                    }
                    else {
                        $.throbber.hide();
                        if (data.HasErrors) {
                            handleError(data.Errors);
                        }
                    }
                },

                onFailure: function (context) {
                    handleError(context);
                },

                onComplete: function () {
                	window.clearInterval(progressIntervall);
                    $("#install-button").removeAttr("disabled");
                    $("#install-progress").html("");
                }
            };
        })();
    </script>
</body>
</html>
